<template>
   <mform label-width="100px" :options="options">
      <template #action="scope">
         <el-button type="primary" @click="submitForm(scope)">Submit</el-button>
         <el-button @click="resetForm(scope)">Reset</el-button>
      </template>
   </mform>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { FormOptions } from '../../components/form/src/types/types';
let options: FormOptions[] = [
   {
      type: 'input',
      value: '',
      placeholder: "请输入用户名",
      label: '用户名',
      prop: 'username',
      rules: [
         {
            required: true,
            message: "用户名不能为空",
            trigger: 'blur',
         },
         {
            min: 2,
            max: 6,
            required: true,
            message: "用户名在2-6之间",
            trigger: 'blur'
         }
      ],
      attrs: {
         clearable: true,
      }
   },
   {
      type: 'input',
      value: '',
      placeholder: "请输入密码",
      label: '密码',
      prop: 'password',
      rules: [
         {
            required: true,
            message: "密码不能为空",
            trigger: 'blur',
         },
         {
            min: 6,
            max: 15,
            required: true,
            message: "密码在6-15之间",
            trigger: 'blur'
         }
      ],
      attrs: {
         showPassword: true,
         clearable: true,
      }
   },
   {
      type: 'select',
      prop: 'like',
      value: '1',
      placeholder: '请选择',
      label: '爱好',
      rules: [
         {
            required: true,
            message: '必选项'
         }
      ],
      attrs: {
         style: {
            width: "100%"
         }

      },
      children: [
         {
            type: 'option',
            value: '1',
            label: '篮球'
         },
         {
            type: 'option',
            value: '2',
            label: '足球'
         },
         {
            type: 'option',
            value: '3',
            label: '排球'
         }
      ]

   },
   {
      type: 'checkbox-group',
      prop: 'gender',
      value: [],
      label: '性别',
      children: [
         {
            type: 'checkbox',
            value: 'male',
            label: '男',
         },
         {
            type: 'checkbox',
            value: 'female',
            label: '女',
         },
         {
            type: 'checkbox',
            value: 'unknown',
            label: '保密',
         },

      ]
   },
   {
      type: 'radio-group',
      prop: 'choosegender',
      value: '',
      label: '性别',
      children: [
         {
            type: 'radio',
            value: 'male',
            label: '男',
         },
         {
            type: 'radio',
            value: 'female',
            label: '女',
         },
         {
            type: 'radio',
            value: 'unknown',
            label: '保密',
         },

      ]
   }
]

let submitForm = (scope) => {
   scope.form.validate((valid) => {
      if (valid) {
         console.log(scope.model)
      } else {
         console.log('error submit!')
         return false
      }
   })
}
let resetForm = (scope) => {
   scope.form.resetFields()
}
</script>
<style lang="scss" scoped></style>
  